import { TableList } from '../../components/TableList';
import { routes } from '../../../routes';
import { Button, Form, Input, message, Modal } from 'antd';
import { useRef, useState } from 'react';
import { MultipleChoiceInput } from '../../components/multiple-choice-input';
import { request } from '../../../utils/request';

const FormItem = Form.Item;

const ProductCategory = () => {
  const [form] = Form.useForm();
  const [modalVisible, setModalVisible] = useState(false);
  const tableInstance = useRef(null);

  const columns = [{
    title: '系列ID',
    dataIndex: 'categoryId',
    key: 'categoryId'
  }, {
    title: '类型名称',
    dataIndex: 'name',
    key: 'name'
  }, {
    title: '基本参数',
    dataIndex: 'baseConfig',
    key: 'baseConfig',
    render: (text, record) => {
      return <Button type={'link'}>查看</Button>;
    }
  }, {
    title: '可选参数',
    dataIndex: 'optionalConfig',
    key: 'optionalConfig',
    render: (text, record) => {
      return <Button type={'link'}>查看</Button>;
    }
  }, {
    title: '创建时间',
    dataIndex: 'createdTime',
    key: 'createdTime'
  }, {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    render: () => {
      return <div>
        <Button type={'primary'} style={{ marginRight: '10px' }}>编辑</Button>
      </div>;
    }
  }];

  const onShowAddClick = () => {
    setModalVisible(true);
  };

  const onAddModalOk = async (values) => {
    let params: any = {};
    params.name = values.name;
    params.baseConfig = values.baseConfig;
    params.optionalConfig = values.optionalConfig;
    const res = await request('/admin/product/category/add', {
      method: 'POST',
      data: params,
      pureData: false
    });
    if (res.code === '1') {
      message.success('添加成功');
      await tableInstance.current.requestData();
      setModalVisible(false);
      return;
    }
    message.error(res.desc);
  };

  return (
    <div>
      <Modal
        title={'添加商品分类'}
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        width={750}
        destroyOnClose={true}
        onOk={() => {
          form.submit();
        }}>
        <Form
          style={{ maxHeight: '400px', overflowY: 'scroll', paddingRight: '20px' }}
          form={form}
          onFinish={onAddModalOk}
        >
          <FormItem
            label={'类型名称'}
            name={'name'}
            rules={[{ required: true, message: '请输入类型名称' }, {
              max: 25, message: '类型名称最多25个字符'
            }]}>
            <Input style={{ width: '200px' }} />
          </FormItem>

          <FormItem
            label={'基本参数'}
            name={'baseConfig'}>
            <MultipleChoiceInput onChange={(e) => console.log(e)} />
          </FormItem>

          <FormItem
            label={'可选参数'}
            name={'optionalConfig'}>
            <MultipleChoiceInput maxLen={10} mode={'one'} onChange={(e) => null} />
          </FormItem>
        </Form>
      </Modal>
      <h1>商品分类</h1>
      <div>
        <Button onClick={onShowAddClick} style={{ float: 'right', marginBottom: '20px' }}>添加</Button>
        <TableList
          ref={tableInstance}
          requestOptions={{
            url: '/admin/product/category/list',
            }}
          columns={columns} />
      </div>
    </div>
  );
};

export default ProductCategory;